function createBeautifyOptionDiv() {	
    var div = document.createElement("div");
    div.id = "beautifyOption";
    div.innerHTML = "<h3> &nbsp&nbspBeautifier options</h3><hr/>";
    var div2 = document.createElement("div");
    div2.style.height = "310";
    div2.style.overflow = "auto";
    
	div2.innerHTML = div2.innerHTML + '<table id="beautifyOptionTable"><tr>' +
					'<td><select id="indentSize"><option value="tab">indent a tab Character</option>'+
					'<option value="two">indent 2 spaces</option>'+
					'<option value="three">indent 3 spaces</option>'+
					'<option value="four" selected="selected">indent 4 spaces</option>'+
					'<option value="eight">indent 8 spaces</option></select></td>'+
					'<td><input type="checkbox" id="preNewLine" checked="checked" />preserve new line</td> </tr><tr>'+
					'<td><select id="brace_style"><option value="collapse">collapse</option>'+
					'<option value="expand">expand</option>'+
					'<option value="end-expand">end-expand</option>'+
					'<option value="expand-strict">expand-strict</option></select></td>'+
					'<td><input type="checkbox" id="jshint_happy" />jshint_happy</td></tr></table>';
    for (var j = 10; j > 0; j--)
		div2.innerHTML = div2.innerHTML + "&nbsp";
    var moreButton = document.createElement('input');
    moreButton.type = 'button';
    moreButton.value = "    run    ";
    moreButton.name = "moreOption";
    moreButton.setAttribute("onclick", "control.runBeautify()");
    div2.appendChild(moreButton);
    var cancelButton = document.createElement('input');
    cancelButton.type = 'button';
    cancelButton.value = "   cancel   ";
    cancelButton.name = "cancelbutton";
    cancelButton.setAttribute("onclick", "beautifyCancel()");
    div2.appendChild(cancelButton);
    // try {
        // div.style.background = "red";
        // div.style.position = "absolute";
        // div.style.width = "350";
        // div.style.height = "180";
        // var left = document.body.clientWidth / 2 - 175;
        // var top = document.body.clientHeight / 2 - 90;
        // div.style.left = left;
        // div.style.top = top;
        // div.style.cssText = "border-radius:1em;" + div.style.cssText;
        // div.style.background = "rgba(220,220,220,0.8)";
    // } catch (e) {
        // div.style.background = "rgb(240,240,240)";
    // }
	div.appendChild(div2);
    div.appendChild(document.createElement('br'));
    div.appendChild(document.createElement('br'));
    div.appendChild(document.createElement('br'));
    div.appendChild(document.createElement('br'));
    document.body.appendChild(div);
}

function beautifyRun(sourceCode) {
	var jshint_happy = document.getElementById("jshint_happy");
	var indentSize = document.getElementById("indentSize");
	var brace_style = document.getElementById("brace_style");
	var preNewLine = document.getElementById("preNewLine");
	var option={};
	if ( jshint_happy.checked ) {
		option.jshint_happy=true;
	}
	if ( preNewLine.checked ) {
		option.preserve_newlines=true;
	}
	switch (indentSize.value) {
		case 'tab':option.indent_char='\t';break;
		case 'two':option.indent_size=2;break;
		case 'three':option.indent_size=3;break;
		case 'four':option.indent_size=4;break;
		case 'eight':option.indent_size=8;break;
		default:option.indent_size=4;
	}
	option.brace_style=brace_style.value;
	if (document.getElementById("beautifyOption")){
		beautifyCancel();
	}
	return js_beautify(sourceCode,option);
}

function beautifyCancel() {
	var div = document.getElementById("beautifyOption");
	document.body.removeChild(div);
}
